<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="template/ui.xhtml">
	<ui:define name="body">
		<h3>Prime Drop Box</h3>

		<h:form id="form">
			
			<p:growl id="messages" showDetail="true" />  
			
			<p:outputLabel style="font-family:'Arial'; font-weight: bold;" value="Ausgewähltes Dokument: "/>
			<p:outputLabel style="font-family:'Arial'; font-weight: bold; color:blue;" id="choosenFile" value="#{documentsController.selectedDocument.name}"/>
			
			<br></br>	
			
			<p:outputLabel style="font-family:'Arial'; font-weight: bold;" value="Ausgewählter Ordner: "/>
			<p:outputLabel style="font-family:'Arial'; font-weight: bold; color:blue;" id="choosenFolder" value="#{documentsController.selectedFolder.name}"/>	
			
			<br></br><br></br>
			
			<p:fileUpload fileUploadListener="#{documentsController.uploadFile}" mode="advanced" dragDropSupport="true"  
            update="messages docTree"/> 
            
            
            <p:dialog id="dialogCreate" header="Choose Name of Folder" widgetVar="createDlg" resizable="false">  
		        <h:panelGrid columns="2" cellpadding="5">  
		            <p:outputLabel for="foldername" value="Foldername:" />  
		            <p:inputText value="#{documentsController.folderName}"   
		                    id="foldername" label="foldername" />  
		              
		            <f:facet name="footer">  
		                <p:commandButton id="okCreateButton" value="Create" update=":form:docTree :form:messages"   
		                    actionListener="#{documentsController.createFolder}"   
		                    oncomplete="createDlg.hide();" icon="ui-icon-star"/>  
		                    
		                <p:commandButton id="abortCreateButton" value="Abort" update=":form:docTree :form:messages"   
		                    oncomplete="createDlg.hide();" icon="ui-icon-cancel"/>
		                    
		            </f:facet>  
		        </h:panelGrid>  
		    </p:dialog>

            <p:dialog id="dialogDelete" header="Delete Folder" widgetVar="deleteDlg" resizable="false">  
		        <h:panelGrid columns="2" cellpadding="5">  
		            <f:facet name="footer">  
		            	<p:outputLabel id="folderDelName" value="Delete the File: #{documentsController.doDeleteFile}" />  
		            	<br></br>
		            	
		                <p:commandButton id="okDeleteButton" value="Delete" update=":form:docTree :form:messages"   
		                    actionListener="#{documentsController.deleteFile}"   
		                    oncomplete="deleteDlg.hide();" icon="ui-icon-star"/>  
		                    
		                <p:commandButton id="abortDeleteButton" value="Abort" update=":form:docTree :form:messages"   
		                    oncomplete="deleteDlg.hide();" icon="ui-icon-cancel"/>
		                    
		            </f:facet>  
		        </h:panelGrid>  
		    </p:dialog>
            
            <p:commandButton icon="ui-icon-arrowreturnthick-1-s" id="downloadLink" value="Download" ajax="false">  
				<p:fileDownload value="#{documentsController.downloadFile}" />  
			</p:commandButton>
			
			<p:commandButton icon="ui-icon-folder-collapsed" id="createFolderButton" type="button" onclick="createDlg.show()" value="Create" update="messages docTree" />  
			
			<p:commandButton icon="ui-icon-trash" id="deleteButton"  value="Delete" onclick="deleteDlg.show()" update="messages docTree folderDelName"/>  
			
			<br></br><br></br>

			<p:tree id="docTree" value="#{documentsController.root}" var="doc" style="width:75%" animate="true" selectionMode="single" dynamic="true" cache="false">  
		        
		        <p:ajax event="select" update=":form:messages :form:choosenFile :form:choosenFolder" listener="#{documentsController.onNodeSelect}" />  
		        <p:ajax event="expand" listener="#{documentsController.onNodeExpand}" />  
		        <p:ajax event="collapse" listener="#{documentsController.onNodeCollapse}" />  
		       
		        
		        <p:treeNode expandedIcon="ui-icon ui-icon-folder-open"  collapsedIcon="ui-icon ui-icon-folder-collapsed">  
		            <h:outputText value="#{doc.name}"/>   
		        </p:treeNode>  
		  
		        <p:treeNode type="document" icon="ui-icon ui-icon-document">          
		          	<h:outputText value="#{doc.name} #{doc.size}"></h:outputText>   
		        </p:treeNode>  

		    </p:tree> 

			
			<p:commandButton value="Chat" style="margin:0" action="chat" ajax="false"/>  

		</h:form>

	</ui:define>
</ui:composition>